<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行系统 - {% block title %}{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
    <style>
        .sidebar {
            min-height: calc(100vh - 56px);
            background-color: #f7f9fb;
        }
        .card-counter {
            box-shadow: 2px 2px 10px #DADADA;
            transition: .3s;
        }
        .card-counter:hover {
            box-shadow: 4px 4px 20px #DADADA;
            transition: .3s;
        }
        .customer-nav {
            margin-bottom: 20px;
            border-bottom: 1px solid #dee2e6;
        }
        .customer-nav .nav-link {
            padding: 10px 15px;
            color: #495057;
        }
        .customer-nav .nav-link.active {
            color: #0d6efd;
            border-bottom: 2px solid #0d6efd;
        }
        .form-required label:after {
            content: " *";
            color: #dc3545;
        }
        @media (max-width: 768px) {
            .sidebar {
                min-height: auto;
                margin-bottom: 20px;
            }
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-bank"></i> 银行管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    {% if session.user_type == 'admin' %}
                        <!-- 管理员菜单 -->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('admin_dashboard') }}">
                                <i class="bi bi-speedometer2"></i> 仪表盘
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="customersDropdown" role="button" data-bs-toggle="dropdown">
                                <i class="bi bi-people-fill"></i> 客户管理
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ url_for('admin_customers') }}">客户列表</a></li>
                                <li><a class="dropdown-item" href="{{ url_for('admin_add_customer') }}">添加客户</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('admin_cards') }}">
                                <i class="bi bi-credit-card"></i> 银行卡管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('admin_deposit_types') }}">
                                <i class="bi bi-piggy-bank"></i> 存款业务管理
                            </a>
                        </li>
                    {% else %}
                        <!-- 客户菜单 -->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('customer_dashboard') }}">
                                <i class="bi bi-speedometer2"></i> 我的账户
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('customer_deposit') }}">
                                <i class="bi bi-cash-coin"></i> 存款
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('customer_withdraw') }}">
                                <i class="bi bi-wallet2"></i> 取款
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('customer_transfer') }}">
                                <i class="bi bi-arrow-left-right"></i> 转账
                            </a>
                        </li>
                    {% endif %}
                </ul>
                <div class="d-flex">
                    <span class="navbar-text me-3">
                        <i class="bi bi-person-circle"></i> {{ session.username }}
                    </span>
                    <a href="{{ url_for('logout') }}" class="btn btn-outline-light">
                        <i class="bi bi-box-arrow-right"></i> 退出
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            {% if session.user_type == 'admin' %}
            <!-- 管理员侧边栏 -->
            <div class="col-md-2 sidebar p-0">
                <div class="list-group list-group-flush">
                    <a href="{{ url_for('admin_dashboard') }}"
                       class="list-group-item list-group-item-action {% if request.path == url_for('admin_dashboard') %}active{% endif %}">
                        <i class="bi bi-speedometer2"></i> 控制面板
                    </a>
                    <a href="{{ url_for('admin_customers') }}"
                       class="list-group-item list-group-item-action {% if request.path.startswith(url_for('admin_customers')) %}active{% endif %}">
                        <i class="bi bi-people-fill"></i> 客户管理
                    </a>
                    <a href="{{ url_for('admin_cards') }}"
                       class="list-group-item list-group-item-action {% if request.path.startswith(url_for('admin_cards')) %}active{% endif %}">
                        <i class="bi bi-credit-card"></i> 银行卡管理
                    </a>
                    <a href="{{ url_for('admin_deposit_types') }}"
                       class="list-group-item list-group-item-action {% if request.path.startswith(url_for('admin_deposit_types')) %}active{% endif %}">
                        <i class="bi bi-piggy-bank"></i> 存款业务管理
                    </a>
                </div>
            </div>
            {% endif %}

            <main class="col-md-{% if session.user_type == 'admin' %}10{% else %}12{% endif %} py-4">
                {% if session.user_type == 'customer' %}
                <!-- 客户导航 -->
                <div class="customer-nav">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link {% if request.path == url_for('customer_dashboard') %}active{% endif %}"
                               href="{{ url_for('customer_dashboard') }}">
                               <i class="bi bi-house-door"></i> 账户概览
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {% if request.path == url_for('customer_deposit') %}active{% endif %}"
                               href="{{ url_for('customer_deposit') }}">
                               <i class="bi bi-cash-coin"></i> 存款
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {% if request.path == url_for('customer_withdraw') %}active{% endif %}"
                               href="{{ url_for('customer_withdraw') }}">
                               <i class="bi bi-wallet2"></i> 取款
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {% if request.path == url_for('customer_transfer') %}active{% endif %}"
                               href="{{ url_for('customer_transfer') }}">
                               <i class="bi bi-arrow-left-right"></i> 转账
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {% if request.path == url_for('report_loss') %}active{% endif %}"
                               href="{{ url_for('report_loss') }}">
                               <i class="bi bi-exclamation-triangle"></i> 卡片挂失
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {% if request.path == url_for('change_password') %}active{% endif %}"
                               href="{{ url_for('change_password') }}">
                               <i class="bi bi-key"></i> 修改密码
                            </a>
                        </li>
                    </ul>
                </div>
                {% endif %}

                <nav aria-label="breadcrumb" class="mb-4">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/"><i class="bi bi-house-door"></i> 首页</a></li>
                        {% block breadcrumb %}{% endblock %}
                    </ol>
                </nav>

                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show">
                                <i class="bi bi-{{ 'exclamation-triangle-fill' if category == 'error' else 'check-circle-fill' }}"></i>
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

                {% block content %}{% endblock %}
            </main>
        </div>
    </div>

    <footer class="mt-5 py-3 bg-light">
        <div class="container text-center">
            <p class="mb-0">&copy; {{ current_year }} 银行管理系统. 保留所有权利.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 表单提交确认
        document.querySelectorAll('.confirm-submit').forEach(form => {
            form.addEventListener('submit', (e) => {
                if (!confirm('确定要执行此操作吗？')) {
                    e.preventDefault();
                }
            });
        });

        // 自动关闭警告框
        setTimeout(() => {
            document.querySelectorAll('.alert').forEach(alert => {
                new bootstrap.Alert(alert).close();
            });
        }, 5000);

        // 增强表单验证
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', function(e) {
                const requiredFields = this.querySelectorAll('[required]');
                let isValid = true;

                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        field.classList.add('is-invalid');
                        isValid = false;
                    } else {
                        field.classList.remove('is-invalid');
                    }
                });

                if (!isValid) {
                    e.preventDefault();
                    this.querySelector('.is-invalid').focus();
                }
            });
        });

        // 输入框实时验证
        document.querySelectorAll('[required]').forEach(input => {
            input.addEventListener('input', function() {
                if (this.value.trim()) {
                    this.classList.remove('is-invalid');
                }
            });
        });
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>